<template>
    <div class="custom-container p-5">
      <div ref="chartRef"  style="width: 100%;height: 380px;"></div>
  
  
    </div>
  </template>
  
  <script lang="ts" setup>
    import { onMounted, ref, Ref } from 'vue';
    import { useECharts } from '/@/hooks/web/useECharts';
    import { get_chars} from "/@/api/biz/echarts";
    import { message } from "ant-design-vue";
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  
    onMounted(() => {
      do_get_chars();
    });
    const loading = ref(false)
    function do_get_chars(){
      get_chars({}).then(res => {

          const arr=res.data.data.result.data
          setOptions({
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    width: 1,
                    color: '#019680',
                  },
                },
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: arr['x'],
  
              },
              yAxis: [
                {
                  type: 'value',
                  max: 100,
                  min:-200
                },
              ],
              grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
              dataZoom: [
                {
                  show: true,
                  realtime: true,
                  start: 40,
                  end: 160,
                  xAxisIndex: [0, 1]
                },
                {
                  type: 'inside',
                  realtime: true,
                  start: 40,
                  end: 160,
                  xAxisIndex: [0, 1]
                }
              ],
              series: [
                {
                  smooth: true,
                  data: arr['y'],
                  type: 'line',
                  itemStyle: {
                    color: '#5C90F9',
                  },
                },
  
              ],
            });
          }).catch(() => {
            //message.error("连接超时，请稍后再试！");
            loading.value = false
          });
      loading.value = false
    }
  </script>
  
  <style lang="less" scoped>
  .spane1{
    color: #0960bd;
    cursor: pointer;
  }
  .list1{
    padding: 20px 0;
  }
  .content1{
    padding: 15px 0;
    text-indent: 24px;
  }
  .hh1{
    line-height: 34px;
    text-align: center;
    font-weight: bold;
  }
  .dd1{
    line-height: 34px;
  }
  .dd2{
    line-height: 34px;
    text-indent: 24px;
  }
  .dd3{
    line-height: 34px;
    text-indent: 24px;
    float: right;
    margin: 20px 0;
  }

  </style>
  